<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        width: 520px;
        height: 280px;
        position: relative;
        overflow: hidden;
        margin: 0 auto;
      }
      .change {
        position: absolute;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        border-radius: 7px 7px;
        background-color: rgba(122, 122, 122, 0.5);
        width: 80px;
        height: 14px;
        left: 220px;
        bottom: 20px;
  
      }
      .change p {
        width: 10px;
        height: 10px;
        float: left;
        border-radius: 50%;
        background-color: blue;
      }
      .change p:nth-child(1) {
        background-color: yellow;
      }
      /* 初始的第一个p设置为黄色 (第一个穿进去的page是2  所以需要设置) 后面changecolor函数每一次对所有都会遍历重新设置颜色 */
      .imgContainer {
        position: absolute;
        width: 2600px;
        height: 280px;
        left: 0px;
        z-index: -1;
      }

      .imgContainer img {
        float: left;
      }
      .next{
        font-size: 40px;
        top: 115px;
        right:10px;
        position:absolute;
        color: white;
      }
      .pre{
        font-size: 40px;
        top: 115px;
        left:10px;
        position:absolute;
        color: white;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p class="next">></p>
      <p class="pre"><</p>
      <div class="change">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </div>
      <div class="imgContainer">
        <img src="./imgs/1t.png" />
        <img src="./imgs/2t.png" />
        <img src="./imgs/3t.png" />
        <img src="./imgs/4t.png" />
        <img src="./imgs/5t.png" />
      </div>
    <script>
      // 1。上一页（复制最后一张到第一张前面） 和下一页 （无限轮播）
      // 鼠标移入 imgContainerEle 停止自动轮播
      // 2.点
      // 复习；

      var imgContainerEle = document.querySelector(".imgContainer");
      var btns = document.querySelectorAll(".change p");
      var page = 1; // 代表当前的图片
      // 克隆第一张图； 将第一张图 放在第六张，滚动第五张图之后再切换到图一
      //  盒子放不下 所以宽度增加  相册 放所有图片+第一张图
      clonePicOne();
      function clonePicOne() {
        var firstEle = imgContainerEle.firstElementChild.cloneNode(true);
        imgContainerEle.style.width = "3120px";
        imgContainerEle.appendChild(firstEle);
      }
      // 自动播放, 一直播放-> 用setintrrval
      //每两秒相册移动520px 视口盒子不能动 move函数实现
      var res;
      autoPlay();
      function autoPlay() {
        res = setInterval(function () {
          move(imgContainerEle, page, "left", function () {
            page++;
            //当执行第六次，第六张图是图一，将page设置为1，并且将图左偏移量设置为0  下一张图是 图二left，视觉效果上实现轮播
            if (page == 6) {
              page = 1;
              imgContainerEle.style.left = "0px";
            }
            changecolor(page - 1);
          });
        }, 2000);
      }
      imgContainerEle.onmouseenter = function () {
        clearInterval(res);
      };
      imgContainerEle.onmouseleave = function () {
        autoPlay();
      };
      //图片移动函数 这是 targetpage 的向左移动的过程
      function move(ele, targetpage, dir, cb) {
        //i从0开始
        var target = targetpage * -520;
        function fn() {
          var num = parseInt(getComputedStyle(ele)[dir]);
          var speed = target < num ? -10 : 10;
          if (num == target) {
            cb && cb();
          } else {
            num += speed;
            ele.style[dir] = num + "px";
            requestAnimationFrame(fn);
          }
        }
        fn();
      }
      //改变颜色
      function changecolor(i) {
        btns.forEach(function (item, k) {
          if (k == i) {
            item.style.background = "yellow";
          } else {
            item.style.background = "blue";
          }
        });
      }
  //点击上一页下一页
  document.querySelector(".pre").onclick=function(e){
    e.target.style.color="yellow"
    document.querySelector(".next").style.color="white"
    var num=parseInt(Math.abs(imgContainerEle.offsetLeft)/520)
    console.log(num)
    page=num-1;
    if(page==-1){page=4;}
    imgContainerEle.style.left = -520 * page + "px";
    changecolor(page)
  }
document.querySelector(".next").onclick=function(e){
var e=e||window.e;
e.target.style.color="yellow"
document.querySelector(".pre").style.color="white"
var nowpage=parseInt(Math.abs(imgContainerEle.offsetLeft)/520);//当前页面
page=nowpage+1;
if(page==6){page=1}
imgContainerEle.style.left = -520 * page + "px";
changecolor(page)
}
 //点击小图标跳转
      btns.forEach((item, i) => {
        item.onclick = function (e) {
          changecolor(i);
          imgContainerEle.style.left = -520 * i + "px";
          page = i;
        };
      });
    </script>
  </body>
</html>
